import React, { PureComponent } from 'react'
import { matchRoutes, renderRoutes } from 'react-router-config'
import { NavLink, Route, Switch } from 'react-router-dom'

export function History(Props) {
  return <h2>History</h2>
}

export function Culture(Props) {
  return <h2>Culture</h2>
}

export function Contact(Props) {
  return <h2>Contact</h2>
}

export function Join(props) {
  return <h2>To Email: jy@jy.com</h2>
}

export default class About extends PureComponent {
  render() {
    console.log(this.props.route)
    const branch = matchRoutes(this.props.route.routes, '/about')
    console.log(branch)
    
    return (
      <div>
        <NavLink exact to="/about" activeClassName="about-active">History</NavLink> | 
        <NavLink to="/about/culture" activeClassName="about-active">Culture</NavLink> | 
        <NavLink to="/about/contact" activeClassName="about-active">Contact</NavLink>
        <button onClick={ e => this.jumpToJoin() }>Join us</button>
        
        {/* <Switch>
          <Route exact path="/about" component={History} />
          <Route path="/about/culture" component={Culture} />
          <Route path="/about/contact" component={Contact} />
          <Route path="/about/join" component={Join} />
        </Switch> */}
        {renderRoutes(this.props.route.routes)}
      </div>
    )
  }

  jumpToJoin() {
    // console.log(this.props.history)
    // console.log(this.props.location)
    // console.log(this.props.match)
    this.props.history.push('/about/join')
  }
}
